import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useMemo, useState } from 'react'
import classNames from 'classnames';
import dayjs from 'dayjs';
import { useSelector } from 'react-redux';
import _ from 'lodash'
import DateList from './components/DateList'
const Month = () => {
    // 账单数据
    const billList = useSelector(state => state.bill.billList)
    const [currentDate, setCurrentDate] = useState(() => {
        return dayjs(new Date).format('YYYY | MM')
    })
    // 月数据分组
    const monthGroup = useMemo(() => {
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY | MM'))
    }, [billList])
    // 日数据分组
    const dayGroup = useMemo(() => {
        let groupData = _.groupBy(monthGroup[currentDate], (item) => dayjs(item.date).format('YYYY-MM-DD'))
        let keys = Object.keys(groupData)
        return {
            groupData,
            keys
        }
    }, [monthGroup[currentDate]])
    const [dateVisible, setDateVisible] = useState(false)
    const monthTotal = useMemo(() => {
        let pay = 0
        let income = 0
        if (monthGroup[currentDate]) {
            let payList = [...monthGroup[currentDate]].filter(item => item.type === 'pay')
            let incomeList = [...monthGroup[currentDate]].filter(item => item.type === 'income')
            pay = payList.length ? payList.reduce((a, c) => a - c.money, 0) : 0
            income = incomeList.length ? incomeList.reduce((a, c) => a + c.money, 0) : 0
        }
        return {
            pay,
            income,
            total: income - pay
        }
    }, [monthGroup, currentDate])


    const onConfirm = (date) => {
        setDateVisible(false)


        setCurrentDate(dayjs(date).format('YYYY | MM'))
    }
    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => setDateVisible(true)}>
                        <span className="text">
                            {currentDate}月账单
                        </span>
                        <span className={classNames('arrow', dateVisible && 'expand')}></span>
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{monthTotal.pay}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthTotal.income}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{monthTotal.total}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        onCancel={() => setDateVisible(false)}
                        closeOnMaskClick={() => setDateVisible(false)}
                        onConfirm={onConfirm}
                        visible={dateVisible}
                        max={new Date()}
                    />
                </div>
                {
                    dayGroup.keys.map(key => {
                        return <DateList key={key} date={key} billList={dayGroup.groupData[key]} />
                    })
                }

            </div>
        </div >
    )
}

export default Month